
<template>
  <view class="landing-page">
    <view class="redpacket">
      <text class="greeting">您的好友送您一个</text>
      <text class="amount">20元</text>
      <text class="type">专享红包</text>
    </view>

    <button class="claim-button" @click="claimAndUse">立即领取并使用</button>

    <view class="product-preview">
      <image class="product-image" src="/static/logo.png" mode="aspectFill"></image>
      <text class="product-name">【睡个好觉】天然草本安神枕</text>
      <text class="product-desc">好友推荐，给您带来前所未有的深度睡眠体验</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      promoter_id: null,
    };
  },
  onLoad(options) {
    // 在页面加载时获取分享链接中的 promoter_id
    if (options.promoter_id) {
      this.promoter_id = options.promoter_id;
      console.log('推荐人ID:', this.promoter_id);
      // 将推荐人ID存入缓存，待用户登录后进行关联
      uni.setStorageSync('promoter_id', this.promoter_id);
    }
  },
  methods: {
    claimAndUse() {
      // --- 请根据新教程，在这里填入您的真实ID ---
      // 路径1: 微信商户平台 → 账户中心 → 商户信息 → 商户号
      const mch_id = '1726805209'; 
      // 路径2: 微信小店管理后台 → 商品管理 → 点击目标商品 → URL中的spu_id参数
      const spu_id = '10000212924865';
      // ------------------------------------------

      const shopAppId = "wxe5f52902cf4de896"; // 微信小店官方AppID

      if (!mch_id || mch_id.includes('请替换')) {
        uni.showToast({ title: '代码中缺少商户号(mch_id)', icon: 'none' });
        return;
      }
      if (!spu_id || spu_id.includes('请替换')) {
        uni.showToast({ title: '代码中缺少商品ID(spu_id)', icon: 'none' });
        return;
      }

      // 根据新教程，拼接跳转路径
      const path = `pages/item/item?mch_id=${mch_id}&spu_id=${spu_id}&from=redpacket`;
      console.log(`准备跳转到微信小店: ${shopAppId}, path: ${path}`);

      uni.navigateToMiniProgram({
        appId: shopAppId,
        path: path,
        success(res) {
          console.log('成功跳转到微信小店', res)
        },
        fail(err) {
          console.error('跳转微信小店失败', err);
          uni.showToast({ title: `跳转失败: ${err.errMsg}`, icon: 'none' });
        }
      });
    },
  },
};
</script>

<style>
.landing-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80rpx 40rpx;
  background-color: #fff5f5;
  min-height: 100vh;
}

.redpacket {
  background-color: #ef4444;
  color: white;
  border-radius: 20rpx;
  padding: 60rpx;
  text-align: center;
  width: 100%;
  box-shadow: 0 10rpx 20rpx rgba(239, 68, 68, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}

.greeting {
  font-size: 32rpx;
  opacity: 0.9;
}

.amount {
  font-size: 80rpx;
  font-weight: bold;
  margin: 20rpx 0;
}

.type {
  font-size: 36rpx;
}

.claim-button {
  background-color: #f59e0b;
  color: white;
  font-size: 36rpx;
  font-weight: bold;
  border-radius: 50rpx;
  padding: 25rpx 0;
  width: 100%;
  text-align: center;
  box-shadow: 0 10rpx 20rpx rgba(245, 158, 11, 0.3);
  margin-bottom: 80rpx;
}

.product-preview {
  text-align: center;
}

.product-image {
  width: 600rpx;
  height: 600rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1);
}

.product-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.product-desc {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}
</style>
